<template>
    <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
    <el-table :data="$store.state.homeview.tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)"
        style="width: 100%">
        <el-table-column prop="date" label="Date" />
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="address" label="Address" />
        <!-- 添加输入框 -->
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
        </el-table-column>
        <!-- 添加输入框 -->
        <!-- 添加删除和修改按钮 -->
        <el-table-column>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
        <!-- 添加删除和修改按钮 -->
    </el-table>
    <!-- 设置导航 -->
    <!-- 修改下面得属性 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="$store.state.homeview.tableData.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
    <!-- 弹出框 -->
    <UpdateDialog></UpdateDialog>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue"
//引入弹出框
import UpdateDialog from "../../components/UpdateDialog";
// 引用useStore
import { useStore } from "vuex";

// 得到store对象
const store = useStore();


// 设置需要的参数与方法
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const search = ref('')
// 使用计算属性处理数据
const filterTableData = computed(() =>
    store.state.homeview.tableData.filter(
        (data: any) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
);
// 修改下面得方法
const handleSizeChange = (val: number) => {
    //一页显示多少条
    pageSize4.value = val;
}
// 添加删除和修改按钮方法与接口
interface User {
    date: string;
    name: string;
    address: string;
}
//在组件的修改按钮调用函数中添加commit
const handleEdit = (index: number, row: User) => {
    console.log(index, row);
    // 调用vuex修改
    store.commit("SET_DIALOG")
};
// let toggleDialog = () => {
//     // 调用vuex修改
//     store.commit("SET_DIALOG")
// }
const handleDelete = (index: number, row: User) => {
    console.log(index, row);
};
// 添加删除和修改按钮方法与接口
const handleCurrentChange = (val: number) => {
    //页码更改方法
    currentPage4.value = val;
}
// const tableData = [
//     {
//         date: '2016-05-03',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-02',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-04',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
//     {
//         date: '2016-05-01',
//         name: 'Tom',
//         address: 'No. 189, Grove St, Los Angeles',
//     },
// ]
</script>
<style></style>